<template>
  <div class="searchPopupList">
    <div class="searchPopupList_main">
      <div @click="active = !active" :class="['title',active ? 'active' : '']">
        <span class="title_value">{{ option.name }}</span>
        <span class="title_Icone" v-if="option.icon"></span>
        <span
          class="title_absolute"
        >{{ option.Checkbox ? ((proxy && proxy.CheckboxName.join(","))) || CheckboxName.join(",") : singleName}}</span>
      </div>
      <!-- 多选或者少选 -->
      <div
        class="content"
        :class="[active ? 'active' : '', option.Checkbox ? 'Checkbox' : '', option.mode ? 'display' : '']"
      >
        <ul :title="option.title" :class="['no-focus-list', option.Checkbox ? 'focus-list' : '']">
          <li
            :title="item.title"
            v-for="(item, index) in option.dataArr"
            :key="item.title"
            @click="option.Checkbox ? setCheckbox(item,index) : setSingle(item,index)"
            :index="index"
            :class="[ option.Checkbox ? ((proxy && proxy.Checkbox.indexOf(index) !== -1) || (Checkbox.indexOf(index) !== -1) ? 'active' : '') : (single === index ? 'active' : '')]"
          >
            <p>{{ item.value }}</p>
          </li>
        </ul>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchPopupList",
  props: ["option", "proxy"],
  data() {
    return {
      active: false,
      single: undefined,
      singleName: "",
      singleTitle:"",
      Checkbox: [],
      CheckboxName: [],
      CheckboxTitle: []
    };
  },
  methods: {
    setSingle(item, index) {
      if (this.single !== index) {
        this.single = index;
        this.singleName = item.value;
        this.singleTitle = item.title
      } else {
        this.single = undefined;
        this.singleName = "";
        this.singleTitle = ""
      }
      this.$emit("input",`${this.singleTitle ? `${this.option.title}:${this.singleTitle}` : ''}`)
    },
    setCheckbox(item, index) {
      let indexOf = this.proxy? this.proxy.Checkbox.indexOf(index) : this.Checkbox.indexOf(index);
      if (indexOf === -1) {
        (this.proxy && this.proxy.Checkbox.push(index)) || this.Checkbox.push(index);
        (this.proxy && this.proxy.CheckboxName.push(item.value)) || this.CheckboxName.push(item.value);
        (this.proxy && this.proxy.CheckboxTitle.push(item.title)) || this.CheckboxTitle.push(item.title);
      } else {
        (this.proxy && this.proxy.Checkbox.splice(indexOf, 1)) || this.Checkbox.splice(indexOf, 1);
        (this.proxy && this.proxy.CheckboxName.splice(indexOf, 1)) || this.CheckboxName.splice(indexOf, 1);
        (this.proxy && this.proxy.CheckboxTitle.splice(indexOf, 1)) || this.CheckboxTitle.splice(indexOf, 1);
      }
      this.$emit("input",`${(this.proxy && this.proxy.CheckboxTitle.length) || this.CheckboxTitle.length ? `${this.option.title}:${(this.proxy && this.proxy.CheckboxTitle.join(" || ")) || this.CheckboxTitle.join(" || ")}` : ''}`)
    }
  }
};
</script>
<style scoped>
.searchPopupList_main {
  height: auto;
  border-left: none;
  margin-bottom: 0.12rem;
  overflow: hidden;
  background: #fff;
}

.searchPopupList_main .title {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0.2rem 0.32rem;
  overflow: hidden;
  color: #323233;
  font-size: 0.28rem;
  line-height: 0.48rem;
  background-color: #fff;
  position: relative;
}

.title_value {
  flex: 1;
}

.title_Icone {
  display: block;
  background: url(//i1.ygimg.cn/pics/mobile/appointment/searchP/down.png) left
    center no-repeat;
  background-size: 0.25rem 0.11rem;
  width: 0.32rem;
  height: 0.48rem;
  margin-left: 0.1rem;
}

.searchPopupList_main .active .title_Icone {
  background-image: url(//i1.ygimg.cn/pics/mobile/appointment/searchP/up.png);
}

.searchPopupList_main .content {
  overflow: hidden;
  width: 100%;
  position: relative;
  max-height: 1.4rem;
  border-bottom: 0.12rem solid #fff;
}

.no-focus-list {
  padding: 0.12rem 0 0.06rem 5%;
  position: relative;
  margin: 0px;
  width: 100%;
  height: auto;
  float: left;
  border-left: 0px;
}

.no-focus-list li {
  border-radius: 0.3rem;
  width: 30%;
  float: left;
  line-height: 0.46rem;
  height: 0.48rem;
  padding-top: 0;
  margin: 0;
  margin-right: 3%;
  border: 0.02rem solid #a0a0a0;
  box-sizing: border-box;
  margin-bottom: 0.18rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  vertical-align: middle;
  color: #666;
}

.focus-list li {
  border-radius: 0.1rem;
}

.no-focus-list li.active,
.focus-list li.active {
  border: 1px solid #ff0000;
}

.no-focus-list li.active p {
  color: #ff0000;
}

.no-focus-list li p,
.focus-list li p {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.28rem;
}

.searchPopupList_main .content.active {
  max-height: none;
  display: block;
}

.searchPopupList_main .title_absolute,
.brand .title_absolute {
  position: absolute;
  right: 1rem;
  top: 0.1rem;
  width: 53%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 0.64rem;
  line-height: 0.64rem;
  text-align: right;
}

.moreTo {
  display: block;
  border-color: rgba(0, 0, 0, 0);
  padding: 0;
  color: #a0a0a0;
  width: 30%;
  line-height: 0.52rem;
  position: absolute;
  bottom: -0.04rem;
  height: 0.52rem;
  right: 0.23rem;
  background: #fff;
  text-align: center;
  font-size: 0.28rem;
}

.searchPopupList_main .Checkbox {
  max-height: 2.05rem;
}

.display {
  display: none;
}
</style>
